<template>
  <div class="box-bpdy box-primary">
    <div class="form-horizontal">
      <div class="box-body">
        <div class="form-group">
          <label class="col-md-3 control-label my-label">功能授权名称:</label>
          <div class="col-sm-9">
            <input class="form-control" v-model="editFunction.name" placeholder="请输入角色名称" v-bind:readonly="isReadOnly">
          </div>
        </div>
        <div class="form-group">
          <label class="col-md-3 control-label my-label">授权功能:</label>
          <div class="col-sm-9">
            <multiselect v-model="this.editFunction.functions" :options="functions" :multiple="true" :close-on-select="false" :clear-on-select="false" :hide-selected="true" :preserve-search="true" select-label="请点击选择" placeholder="请选择功能授权(可多选)" label="name" track-by="id">
            </multiselect>
          </div>
        </div>
        <div class="form-group">
          <label class="col-md-3"></label>
          <div class="col-sm-9">
            <div class="checkbox">
              <label>
                <input v-model="this.editFunction.isDefault" type="checkbox">默认功能授权
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import RestApi from "../../../common/restapi"
import Multiselect from 'vue-multiselect'
export default {
  name: "funcPrivEdit",
  props: ["func"],
  data() {
    return {
      isReadOnly: false,
      editFunction: {
        name: "",
        functions: [],
        isDefault: false
      },
      functions: []
    }
  },
  components: {
    Multiselect
  },
  created: function() {
    if (this.func) {
      this.editFunction = this.func
    }
    let that = this
      RestApi.getFunctions(function(data){
        that.functions = data.data
      })
    
  },
  mounted: function() {
    
  },
  methods: {
  }
}
</script>
